{include file='admin/header.html'}

<!-- 搜索框 -->
<div class="layui-form">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">{$tran.file_name}</label>
            <div class="layui-input-block">
                <input type="text" name="name" value="" placeholder="{$tran.input}" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">{$tran.type}</label>
            <div class="layui-input-block">
                <select name="type">
                    <option value="">{$tran.choose}</option>
                    <option value="0">{$tran.picture}</option>
                    <option value="1">{$tran.media}</option>
                    <option value="2">Flash</option>
                    <option value="3">{$tran.file}</option>
                </select>
            </div>
        </div>
        {if $exts}
        <div class="layui-inline">
            <label class="layui-form-label">{$tran.ext_name}</label>
            <div class="layui-input-block">
                <select name="ext">
                    <option value="">{$tran.choose}</option>
                    {foreach from="$exts" item="_ext"}
                    <option value="{$_ext}">{$_ext}</option>
                    {/foreach}
                </select>
            </div>
        </div>
        {/if}
        <div class="layui-inline">
            <label class="layui-form-label">{$tran.status}</label>
            <div class="layui-input-block">
                <select name="status">
                    <option value="">{$tran.choose}</option>
                    <option value="0">{$tran.normal}</option>
                    <option value="1">{$tran.unused}</option>
                    <option value="2">{$tran.invalid}</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">{$tran.date}</label>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="start" placeholder="yyyy-MM-dd" class="layui-input date">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="end" placeholder="yyyy-MM-dd" class="layui-input date">
            </div>
        </div>
        <div class="layui-inline">
            <button type="submit" lay-submit lay-filter="search"
                class="layui-btn layui-icon layui-icon-search"></button>
        </div>
    </div>
</div>

<!-- 数据表格 -->
<table id="dataTable" lay-filter="dataTable"></table>

<!-- 头工具栏 -->
<script type="text/html" id="toolbar">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-icon layui-icon-delete" title="{$tran.delall}" lay-event="delAll"></button>
        <button class="layui-btn layui-btn-sm layui-icon layui-icon-upload-circle" title="{$tran.upload}" lay-event="upload"></button>
        <button class="layui-btn layui-btn-sm layui-icon layui-icon-refresh" title="{$tran.refresh}" lay-event="refresh"></button>
    </div>
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm layui-icon layui-icon-unlink" title="{$tran.calc_file}" lay-event="calc"> {$tran.calc_file}</button>
    </div>
</script>

<!-- dataTable render -->
<script>
    var render = {
        elem: '#dataTable',
        toolbar: '#toolbar',
        defaultToolbar: ['filter', 'exports', 'print'],
        cellMinWidth: 80,
        height: 'full',
        where: { search: '' }, //搜索
        title: '{$tran.media_list}', //数据表格标题
        page: true, //开启分页
        cols: [[
            { type: 'checkbox', fixed: 'left' },
            { field: 'id', title: 'ID', sort: true, width: 80 },
            { field: 'name', title: '{$tran.file_name}', sort: true },
            { field: 'ext', title: '{$tran.ext_name}', sort: true },
            { field: 'preview', title: '{$tran.preview}', event: 'preview', style: 'cursor: pointer;' },
            {
                field: 'size', title: '{$tran.size}', sort: true, templet: function (d) {
                    return d.size + 'KB';
                }
            },
            { field: 'path', title: '{$tran.url}' },
            {
                field: 'status', title: '{$tran.status}', sort: true, width: 90, templet: function (d) {
                    if (d.status == 0) return '<span style="color:green">{$tran.normal}</span>';
                    else if (d.status == 1) return '<span style="color:red">{$tran.unused}</span>';
                    else if (d.status == 2) return '<span style="color:grey;text-decoration:line-through;">{$tran.invalid}</span>';
                }
            },
            { field: 'time', title: '{$tran.time}', sort: true },
            {
                title: '{$tran.option}', align: 'center', width: 155, templet: function (d) {
                    return '<a class="layui-btn layui-btn-primary layui-btn-xs layui-icon layui-icon-download-circle'+ (d.url == '' ? ' layui-btn-disabled' : '') +'" title="{$tran.download}"' + (d.url == '' ? ' disabled' : ' href="' + (d.url) + '" download="' + d.name + '"') + '></a>' +
                        '<button class="layui-btn layui-btn-normal layui-btn-xs layui-icon layui-icon-link'+ (d.status == 2 ? ' layui-btn-disabled' : '') +'" title="{$tran.url}"' + (d.status == 2 ? ' disabled' : ' lay-event="path"') + '></button>' +
                        '<button class="layui-btn layui-btn-normal layui-btn-xs layui-icon layui-icon-edit'+ (d.status != 1 ? ' layui-btn-disabled' : '') +'" title="{$tran.rename}"' + (d.status != 1 ? ' disabled' : ' lay-event="rename"') + '></button>' +
                        '<button class="layui-btn layui-btn-danger layui-btn-xs layui-icon layui-icon-delete'+ (d.status == 0 ? ' layui-btn-disabled' : '') +'" title="{$tran.delete}"' + (d.status == 0 ? ' disabled' : ' lay-event="del"') + '></button>';
                }
            }
        ]]
    }
</script>

<script>
    layui.use(['upload'], function () {
        var upload = layui.upload,
            $ = layui.jquery;

        var site_url = '//{$smarty.server.SERVER_NAME}' + (('{$smarty.server.SERVER_PORT}' == '80' || '{$smarty.server.SERVER_PORT}' == '443') ? '' : ':{$smarty.server.SERVER_PORT}');

        // 文件上传（拖拽上传）
        upload.render({
            elem: '#upload-drag',
            url: site_url + '/{$lang}/admin/media/upload.html', // 改成您自己的上传接口
            size: '{$setting.upload_size}',
            exts: '{$setting.upload_type}',
            done: function (res) {
                if (res.code) return layer.msg(res.msg, { icon: 2 });
                layer.msg('{$tran.upload_success}');
                if (/\.(gif|jpg|jpeg|png|bmp|webp|psd|svg|tiff)$/gi.test(res.files.file)) {
                    $('#upload-drag-view').removeClass('layui-hide').find('img').attr('src', res.files.file);
                }
            }
        });
    });
</script>

<!-- 批量上传 -->
<div class="layui-upload-drag" id="upload-drag" style="margin:10px 10px 0 10px;display: none;">
    <i class="layui-icon layui-icon-upload"></i>
    <p>{$tran.drag_or_upload}</p>
    <div class="layui-hide" id="upload-drag-view">
        <hr>
        <img src="" alt="Preview" style="max-width: 196px; max-height: 120px;">
    </div>
</div>

{include file='admin/inc/dataTable.html'}

{include file='admin/footer.html'}